<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>交易达标抽奖</title>
		<meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1,user-scalable=no">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta name="Keywords" content="">
		<meta name="Description" content="">

		<!-- Mobile Devices Support @begin -->

		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
		<meta content="no-cache" http-equiv="pragma">
		<meta content="0" http-equiv="expires">
		<meta content="telephone=no, address=no" name="format-detection">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- apple devices fullscreen -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<!-- Mobile Devices Support @end -->
		<!-- 调试用的移动端 console -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
		<!-- <script>eruda.init();</script> -->
		<!-- 公众号 JSSDK -->
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<!--
			1.已认证的服务号
			2.公众号的唯一标识appid&秘钥
			3.小程序关联公众号
			4.
		 -->
		 <style type="text/css">
			body{
				padding: 0;
				margin: 0;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
			 }
			.h5_view{
				width: 100%;
				height: 100vh;
				position: fixed;
				top: 0;
				left: 0;
				z-index: -1;
			}
			.h5_bg{
				width: 100%;
				/* height: 812px;
				border: 1px solid #333; */
				overflow: hidden;
			}
			.get_view{
				width: 100%;
				position: fixed;
				bottom: 20px;
				display: flex;
				justify-content: center;
				animation:mymove 2s infinite;
				animation-direction:alternate;
				animation-timing-function: ease-in-out;
			}
			.get_btn{
				width: 283px;
				height: 119px;
				background-image: url('https://jinjian.sutpay.cn/image/wyh_bg146.png');
				{#background-image: url('https://jinjian.sutpay.cn/image/wyh_bg146_1.png');#}
				background-size: 100% 100%;
			}
			@keyframes mymove{
				0%{
				transform: scale(1);  /*开始为原始大小*/
				}
				25%{
				   transform: scale(1.1); /*放大1.1倍*/
				}
				50%{
				   transform: scale(1);
				}
				75%{
				   transform: scale(1.1);
				}

			}
		 </style>
	</head>
	<body onload="getScreenHeight()">
		<div class="h5_view">
			<img class="h5_bg" src="http://jinjian.sutpay.cn/image/wyh_bg147.png" >
		</div>
		<div class="get_view" id="myElement">
			<div class="get_btn" onclick="btn()">
			</div>
		</div>
		<script>
			function getScreenHeight() {
				// 获取 User Agent
				var userAgent = navigator.userAgent.toLowerCase();
				var element = document.getElementById("myElement");
				// 判断是否在微信中打开
				if (userAgent.indexOf('micromessenger') !== -1) {
				    console.log('当前页面在微信中打开');
					document.body.style.backgroundColor='#FF6B3A'
					element.style.bottom = "90px";
				} else {
				    console.log('当前页面不在微信中打开');
					element.style.bottom = "20px";
				}
			  var screenHeight = window.innerHeight;
			  console.info("屏幕高度是: " + screenHeight + " 像素");
			}
			function btn(){
				console.info('....')
				// location.href = 'weixin://dl/business/?t=QStq3lP0kQj'
				location.href='{{ data.openlink }}'
			}

		</script>
	</body>
</html>
